<template>
  <div class="denglu">
    <!-- 登录表单 -->
    <van-form class="login-form">
      <!-- 输入框 -->
      <van-field
        v-model="mobile"
        name="user"
        placeholder="账号"
        :rules="verifyrules.mobile"
      >
        <i slot="left-icon" class="iconfont icon-user"></i>
      </van-field>
      <van-field
        v-model="password"
        name="password"
        placeholder="密码"
        :rules="verifyrules.password"
      >
        <i slot="left-icon" class="iconfont icon-lock"></i>
      </van-field>
      <!-- 按钮 -->
      <div class="register-btn">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
      <div class="login-btn">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
      <!-- 忘记密码 -->
      <div class="forgetpsd">
        <a href="#">
          忘记密码?
        </a>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'denglu',
  // 定义属性
  data() {
    return {
      mobile: '',
      password: '',
      // 验证规则
      verifyrules: {
        mobile: [
          {
            required: true,
            message: '请输入账号'
          },
          {
            pattern: /^1\d{10}$/,
            message: '手机号格式有误'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码'
          },
          {
            pattern: /^\d{16}$/,
            message: '密码错误'
          }
        ]
      }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.denglu {
  .login-form {
    margin: 80px auto 0;
    width: 590px;
    // 输入框样式
    .van-cell {
      line-height: 1rem;
      padding: 0.26667rem 55px;
      ::placeholder {
        font-size: 28px;
        color: #cbcbcb;
      }
      .icon-user {
        font-size: 34px;
        color: #cbcbcb;
        margin-right: 21px;
      }
      .icon-lock {
        font-size: 40px;
        color: #cbcbcb;
        margin-right: 21px;
      }
    }
    // 下边框样式
    .van-cell::after {
      border-bottom: 7px solid #e2e2e2;
    }
    // 按钮样式
    .register-btn {
      margin-top: 95px;
      .van-button--info {
        background-color: #fff;
      }
      .van-button {
        font-size: 30px;
        color: #979797;
        border: solid 2px #979797;
      }
    }
    .login-btn {
      margin-top: 52px !important;
      .van-button--info {
        background-color: #4a90e2;
      }
      .van-button {
        font-size: 30px;
        border: none;
      }
    }

    // 忘记密码
    .forgetpsd {
      a {
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #4a90e2;
      }
    }
  }
}
</style>
